<template>
  <!--用户管理/有效用户列表-->
  <div>
    <!--搜索栏及表单-->
    <div style="margin: 50px auto;width: fit-content">
      <el-input v-model="filter.id" type="text" placeholder="请输入搜索的用户id" style="width: 800px;margin-right: 10px" @input="searchDebounce"/>
      <el-button type="primary" style="margin: 10px 5px" icon="el-icon-search" @click="search()">搜索</el-button>
      <el-button type="info" style="margin: 10px 5px" icon="el-icon-setting" @click="handleAdvancedSearch()">高级搜索
      </el-button>
      <el-button type="info" style="margin: 10px 5px" icon="el-icon-delete" @click="handleClear()">清除筛选</el-button>
      <el-button type="success" style="margin: 10px 5px" icon="el-icon-plus" @click="handleAdd()">添加新用户</el-button>
      <el-dialog :title="title" :visible.sync="dialogFormVisible" center>
        <el-form :model="form">
          <el-form-item label="用户id" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="精确匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.id" autocomplete="off" :disabled="title!=='高级搜索'" style="width: 80%" />
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="模糊匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.username" autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item v-show="title === '添加用户'" label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" show-password autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item v-show="title === '添加用户'" label="确认密码" :label-width="formLabelWidth">
            <el-input v-model="form.confirm" show-password autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="精确匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-select v-model="form.gender" placeholder="请选择性别">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="0" />
              <el-option label="保密" :value="2" />
              <el-option v-show="title==='高级搜索'" label="任意" :value="null" />
            </el-select>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="模糊匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.phone" autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-tooltip v-show="title==='高级搜索'" class="item" effect="dark" content="模糊匹配" placement="top-start">
              <i class="el-icon-question" style="margin-right: 20px" />
            </el-tooltip>
            <el-input v-model="form.email" autocomplete="off" style="width: 80%" />
          </el-form-item>
          <el-form-item v-show="title!=='高级搜索'" label="头像" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="this.$api.img.userAvatar"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.avatar" v-lazy="this.$api.img.server + form.avatar" class="avatar">
              <i v-else id="avatar-uploader-icon" class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleDialogConfirm()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--表格-->
    <el-table
      :data="rows"
      style="width: 100%"
      border
    >
      <el-table-column
        prop="id"
        label="用户id"
        width="180"
        align="center"
      />
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
        align="center"
      />
      <el-table-column
        prop="gender"
        label="性别"
        width="180"
        :formatter="formatGender"
        align="center"
      />
      <el-table-column
        prop="phone"
        label="手机"
        width="180"
        align="center"
      />
      <el-table-column
        prop="email"
        label="邮箱"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="{row,$index}">
          <el-button type="info" icon="el-icon-lock" size="mini" @click="handleResetPass(row,$index)">重置密码</el-button>
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="handleModify(row,$index)">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleInvalid(row,$index)">注销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页器-->
    <el-pagination
      :current-page="index"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px;text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { debounce } from 'lodash'
export default {
  name: 'ActiveTable',
  data() {
    return {
      rows: [],
      filter: {
        id: '',
        username: '',
        email: '',
        phone: '',
        gender: null
      },
      total: 100,
      size: 5,
      index: 1,
      title: '',
      dialogFormVisible: false,
      form: {
        id: '',
        username: '',
        email: '',
        phone: '',
        gender: '',
        avatar: ''
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.search()
  },
  methods: {
    searchDebounce: debounce(function() {
      this.search()
    }, 300),
    handleClear() {
      this.filter = {
        id: '',
        username: '',
        email: '',
        phone: '',
        gender: null
      }
      this.search()
    },
    async handleResetPass(row, index) {
      const res = await this.$api.user_active.resetPass(row.id)
      await this.$alert('请记录新密码：' + res.data.password, '新密码', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'success',
            message: `密码重置成功`
          })
        }
      })
    },
    handleAdvancedSearch() {
      this.title = '高级搜索'
      this.form = this.filter
      this.dialogFormVisible = true
    },
    handleAdd() {
      this.title = '添加用户'
      this.form = {
        id: '',
        realName: '',
        username: '',
        email: '',
        phone: '',
        gender: '',
        avatar: ''
      }
      this.dialogFormVisible = true
      this.search()
    },
    search() {
      const that = this
      this.$api.user_active.search(this.filter, this.index, this.size).then(response => {
        // console.log(response.data.rows)
        that.rows = response.data.rows
        // console.log(that.rows)
        // console.log(response.data.total)
        that.total = response.data.total
        // console.log(that.total)
      })
    },
    handleModify(row, index) {
      this.title = '编辑用户'
      this.dialogFormVisible = true
      this.form = row
    },
    async handleInvalid(row, index) {
      const res = await this.$api.user_active.invalid({ id: row.id })
      this.search()
      this.$message.success(res.message)
    },
    handleSizeChange(val) {
      this.size = val
      this.search()
    },
    handleCurrentChange(val) {
      this.index = val
      this.search()
    },
    handleAvatarSuccess(res) {
      this.form.avatar = res.data.address
    },
    beforeAvatarUpload(file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png')
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    async handleDialogConfirm() {
      switch (this.title) {
        case '编辑用户': {
          const edit = await this.$api.user_active.update({ id: this.form.id }, this.form)
          this.search()
          this.$message.success(edit.message)
          break
        }
        case '添加用户': {
          if (this.form.password !== this.form.confirm) {
            this.$message.error('两次输入密码不一致')
            return
          }
          const add = await this.$api.user_active.add(this.form)
          this.$message.success(add.message)
          this.search()
          break
        }
        case '高级搜索': {
          this.filter = this.form
          this.search()
          break
        }
        default: {
          this.$message.error('系统故障！')
        }
      }
      this.dialogFormVisible = false
    },
    formatGender(row, column) {
      switch (row.gender) {
        case 1:
          return '男'
        case 0:
          return '女'
        default:
          return '未知'
      }
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
